<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        * {
            margin: 0;
            padding: 0;
         }
        main{
            width: 90%;
            margin: 0 auto;
        }
        h1{
            background: gainsboro;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .phone_info{
            width: 20%;
            border:1px solid gray ;
            padding: 10px 0;
            float: left;
            margin: 28px;

        }
        .phone_info img{
            width: 100%;
            
        }
        .phone_info p{
            font-size: 16px;
            width: 100%;
            font-weight: bold;
            text-align: left;
            line-height: 24px;
            
        }
        .phone_info p:nth-of-type(3) span{
            text-decoration: line-through ;
        }
        .phone_info p:nth-of-type(4) span{
            color: red ;
        }
        button{
            display: inline-block;
            outline: none;
            width: 80px;
            height: 30px;
            background-color: royalblue;
            color: wheat;
        }
        .btn{
            width: 504px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <header>
        <h1>实现商品列表（根据价格，销量，评价排序）</h1>
        <div class="btn">
            <button id="price_down">价格降序</button>
            <button id="price_up">价格升序</button>
            <button id="sales_down">销量降序</button>
            <button id="sales_up">销量升序</button>
            <button id="eva_down">评价降序</button>
            <button id="eva_up">评价升序</button>
        </div>
    </header>
    <main id="show">
        <!-- <div class="phone_info">
            <img src="./img/honor7.jpg" alt="">
            <p>型号：<span></span></p>
            <p>颜色：<span></span></p>
            <p>原价：<span></span></p>
            <p>活动价：<span></span></p>
            <p>评价数：<span></span></p>
            <p>销售量：<span></span> </p>
        </div> -->
    </main>
    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
        //渲染数据
        
       function write_out() {
            show.innerHTML=''
            for (var i = 0; i < data.length; i++) {
                show.innerHTML +=
                    '<div class="phone_info">' +
                    '<img src=' + data[i].imgurl + '>' +
                    '<p>型号：<span>' + data[i].name + '</span></p>' +
                    '<p>颜色：<span>' + data[i].color + '</span></p>' +
                    '<p>原价：<span>' + data[i].price + '</span></p>' +
                    '<p>活动价：<span>' + data[i].sale + '</span></p>' +
                    '<p>评价数：<span>' + data[i].evaluate + '</span></p>' +
                    '<p>销售量：<span>' + data[i].sales + '</span></p>'
                '</div>'
                console.log(show.innerHTML);
            }
        }
        write_out();
        price_down.onclick = function () {
            data.sort(function (a, b) {
                return b.sale - a.sale;
            })
            write_out();
        }
        price_up.onclick = function () {
            data.sort(function (a, b) {
                return a.sale - b.sale;
            })
            write_out();
        }
        sales_down.onclick = function () {
            data.sort(function (a, b) {
                return b.sales - a.sales;
            })
            write_out();
        }
        sales_up.onclick = function () {
            data.sort(function (a, b) {
                return a.sales - b.sales;
            })
            write_out();
        }
        eva_down.onclick = function () {
            data.sort(function (a, b) {
                return b.evaluate - a.evaluate;
            })
            write_out();
        }
        eva_up.onclick = function () {
            data.sort(function (a, b) {
                return a.evaluate - b.evaluate;
            })
            write_out();
        }
    </script>
</body>
</html>